<template>
  <div class="content">
    <el-dialog
      title="入住人详情"
      :visible.sync="value"
      width="800px"
      :before-close="handleClose"
    >
      <el-button size="small" @click="addHandel">新增</el-button>
      <el-table :data="userList" style="width: 100%; margin-top: 20px">
        <el-table-column prop="date" label="分类" width="180">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.member_type"
              :value="scope.row.memberType"
            />
          </template>
        </el-table-column>
        <el-table-column prop="memberName" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="memberPhone" label="手机号"></el-table-column>
        <el-table-column prop="residenceStatus" label="是否入住">
          <template slot-scope="scope">
            <span v-if="scope.row.residenceStatus == 1">已入住</span>
            <span v-if="scope.row.residenceStatus == 2">不入住</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="readMember(scope.row)"
            >查看
            </el-button
            >
            <el-button v-if="scope.row.memberType == 2" type="text" @click="editManager(scope.row)"
                       v-text="scope.row.residenceStatus == 1?'不入住':'入住'"
            ></el-button>
            <el-button
              type="text"
              v-if="scope.row.memberType == 3"
              @click="editMember(scope.row)"
            >编辑
            </el-button
            >
            <el-button
              type="text"
              style="color: #eb0927"
              v-if="scope.row.memberType == 3"
              @click="delMember(scope.row)"
            >删除
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      :title="title"
      :visible.sync="addVisible"
      width="500px"
      append-to-body
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        :inline="false"
        label-width="80px"
        :disabled="isRead"
      >
        <el-form-item label="分类" prop="memberType" v-if="form.memberType!=1">
          <el-radio-group v-model="form.memberType">
            <el-radio
              v-for="item in dict.type.member_type"
              v-if="item.value == 3"
              :key="item.value"
              :label="item.value"
            >{{ item.label }}
            </el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="姓名" prop="memberName">
          <el-input
            style="width: 200px"
            v-model="form.memberName"
            placeholder="请输入姓名"
            :disabled="form.facePhoto"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="memberPhone">
          <el-input
            style="width: 200px"
            v-model="form.memberPhone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="idCard">
          <el-input
            style="width: 200px"
            v-model="form.idCard"
            placeholder="请输入身份证"
            :disabled="form.facePhoto"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="关系"
          prop="memberRelation"
          v-if="form.memberType == 3"
        >
          <el-select
            v-model="form.memberRelation"
            placeholder="请选择"
            style="width: 200px"
          >
            <el-option
              v-for="item in dict.type.member_relation"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="idCardImgsList" label="证件照片" v-if="form.memberId && form.facePhoto">
          <!--          <div style="display: flex">-->
          <!--            <div-->
          <!--              v-for="(item, index) in form.idCardImgsList"-->
          <!--              :key="index"-->
          <!--              class="item-img-box"-->
          <!--            >-->
          <!--              <img class="up-img" :src="item" alt=""/>-->
          <!--            </div>-->
          <!--            <el-upload-->
          <!--              v-if="form.idCardImgsList.length != 1&&form.memberType==3"-->
          <!--              :action="uploadImgUrl"-->
          <!--              list-type="picture-card"-->
          <!--              :auto-upload="true"-->
          <!--              :headers="headers"-->
          <!--              :accept="'image/*'"-->
          <!--              :on-success="onSuccess"-->
          <!--              :show-file-list="false"-->
          <!--            >-->
          <!--              <i slot="default" class="el-icon-plus"></i>-->
          <!--            </el-upload>-->
          <!--            <el-upload-->
          <!--              v-if="form.idCardImgsList.length == 1&&form.memberType==3"-->
          <!--              :action="uploadImgUrl"-->
          <!--              :auto-upload="true"-->
          <!--              :headers="headers"-->
          <!--              :accept="'image/*'"-->
          <!--              :on-success="onSuccess"-->
          <!--              :show-file-list="false"-->
          <!--            >-->
          <!--              <el-button size="small" type="primary">更换照片</el-button>-->
          <!--            </el-upload>-->
          <!--          </div>-->
          <el-image
            style="width: 100px; height: 100px;background-color: #f0f2f5;text-align: center;line-height: 100px;color: #9292A7;font-size: 24px;margin-right: 10px;"
            :src="form.facePhoto"
            fit="contain"
            :preview-src-list="[form.facePhoto]"
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="!isRead">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button v-if="!isRead" type="primary" @click="onSubmit"
        >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import formRule from '@/utils/formRule.js'
import { getToken } from '@/utils/auth'
import {
  addMember,
  memberList,
  editMember,
  delMember,
  editManager
} from '@/api/order/member'

export default {
  name: 'memberEdit',
  dicts: ['member_type', 'member_relation'],
  props: {
    value: {
      type: Boolean,
      default: false
    },
    visible: {
      type: Boolean,
      default: false
    },
    order: {
      type: Object,
      default: {}
    },
    // 是否为编辑操作
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: '新增入住人',
      orderInfo: {},
      isRead: false,
      form: {
        houseId: '',
        orderId: '',
        memberType: '3',
        memberName: '',
        memberPhone: '',
        memberRelation: '',
        idCard: '',
        idCardImgsList: []
      },
      headers: {
        Authorization: `Bearer   ` + getToken()
      },
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址
      rules: {
        memberType: [
          { required: true, message: '请选择分类', trigger: 'change' }
        ],
        memberName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        memberRelation: [
          { required: false, message: '请关系姓名', trigger: 'change' }
        ],
        memberPhone: [
          { required: false, message: '请输入手机', trigger: 'blur' },
          {
            validator: formRule.phone,
            message: '',
            trigger: ['change', 'blur']
          }
        ],
        idCard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          {
            validator: formRule.IDCard,
            message: '',
            trigger: ['change', 'blur']
          }
        ]
      },
      addVisible: false,
      userList: []
    }
  },
  created() {
    this.getmemberList()
  },
  methods: {
    handleClose() {
      this.$emit('input', false)
    },
    onSuccess(response, file, fileList) {
      this.form.idCardImgsList = [response.url]
    },
    handleRemove(index) {
      this.form.idCardImgsList.splice(index, 1)
    },
    checkoutDisabled(communityHouseUserId) {
      if (!this.isEdit && communityHouseUserId != '') {
        return true
      } else {
        return false
      }
    },
    addHandel() {
      this.form = this.$options.data().form
      this.form.houseId = this.order.houseId
      this.form.orderId = this.order.orderId
      this.isRead = false
      this.title = '新增入住人'
      this.addVisible = true
    },
    readMember(row) {
      this.isRead = true
      let form = row
      if (!form.idCardImgsList) {
        form.idCardImgsList = []
      }
      this.form = {...form }
      this.title = '查看入住人'
      this.addVisible = true
    },
    editMember(row) {
      this.isRead = false
      let form = row
      if (!form.idCardImgsList) {
        form.idCardImgsList = []
      }
      this.form = {...form }
      this.title = '编辑入住人'
      this.addVisible = true
    },
    delMember(row) {
      this.$confirm('确认删除该成员?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delMember(row).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getmemberList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    editManager(row) {
      let text = row.residenceStatus == 1 ? '房管员是否不入住房间？' : '房管员是否入住房间？'

      this.$confirm(text, '提示', {
        confirmButtonText: '保存',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          memberId: row.memberId,
          residenceStatus: row.residenceStatus == 1 ? '2' : '1'
        }
        editManager(params).then(() => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.getmemberList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        })
      })
    },
    //成员列表
    getmemberList() {
      memberList({
        houseId: this.order.houseId,
        orderId: this.order.orderId
      }).then((response) => {
        this.userList = response.rows
      })
    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let form = Object.assign({}, this.form)
          if (this.form.memberId) {
            editMember(form).then((res) => {
              this.$message.success('修改成员成功')
              this.getmemberList()
              this.addVisible = false
            })
          } else {
            this.form.houseId = this.order.houseId
            this.form.orderId = this.order.orderId
            addMember(form).then((res) => {
              this.$message.success('新增成员成功')
              this.getmemberList()
              this.addVisible = false
            })
          }
        } else {
          return false
        }
      })
    },
    close() {
      this.$emit('input', false)
    }
  }
}
</script>
<style lang="scss" scoped>
.member-item {
  border: 1px solid #999;
  padding: 10px;
  border-radius: 4px;
  margin-top: 20px;
  position: relative;
}

.avatar-uploader::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader::v-deep .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
}

.item-img-box {
  position: relative;
  border: 1px solid #aaaaaa;
  width: 148px;
  height: 148px;
  margin-right: 10px;
  border-radius: 4px;
  overflow: hidden;

  .up-img {
    width: 148px;
    height: 148px;
  }

  .item-delete {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 99;
    transform: translate(-50%, -50%);
    font-size: 32px;
    color: #ff4949;
    cursor: pointer;
  }
}
</style>
